<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery圆形统计插件circliful</title>

<link type="text/css" rel="stylesheet" href="/plugins/piechart/css/jquery.circliful.css">
<script type="text/javascript" charset="utf-8" src="/plugins/piechart/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/plugins/piechart/js/jquery.circliful.min.js"></script>
<style>
body {
    font-family: arial,verdana, sans-serif;
    font-size: 12px;
}
</style>

</head>
<body>

<center>

<div id="myStathalf" data-dimension="250" data-text="50%" data-info="New Clients" data-width="30" data-fontsize="3" data-percent="50" data-fgcolor="#7ea568" data-bgcolor="#eee" data-type="half" data-fill="#ddd"></div>

<div id="myStat" data-dimension="250" data-text="35%" data-info="New Clients" data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd"></div>

<div id="myStathalf2" data-dimension="250" data-text="35" data-info="New Clients" data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#7ea568" data-bgcolor="#eee" data-type="half" data-icon="fa-task"></div>

<div id="myStat2" data-dimension="250" data-text="35%" data-info="New Clients" data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc" data-bgcolor="#eee"></div>

</center>

<script type="text/javascript">
$( document ).ready(function(){
	$('#myStathalf').circliful();
	$('#myStat').circliful();
	$('#myStathalf2').circliful();
	$('#myStat2').circliful();
});
</script>

</body>
</html>